<!-- components/SearchBar.vue -->
<template>
  <div class="search-card">
    <el-input
      size="large"
      :model-value="keyword"
      @update:model-value="$emit('update:keyword', $event)"
      placeholder="请输入关键词搜索..."
      @keyup.enter="$emit('search', $event.target.value)"
    >
      <template #append>
        <el-button type="primary" size="large" @click="$emit('search')">
          搜索
        </el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup>
defineProps({
  keyword: {
    type: String,
    default: "",
  },
});

defineEmits(["update:keyword", "search"]);
</script>
